<template>
  <div class="write-article pad">
    <el-page-header class="page-header" @back="goBack" :content="title">
    </el-page-header>
    <el-form :model="article" label-position="top" :rules="rules" class="m-t-b" ref="article">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="article.title" />
      </el-form-item>
      <el-form-item label="文章封面图" prop="banner">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :http-request="uploadBanner"
        >
          <img v-if="article.banner" :src="article.banner" class="avatar">
          <i v-else class="el-icon-upload avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="文章内容" prop="content">
        <ckeditor v-model="article.content"></ckeditor>
      </el-form-item>
    </el-form>
    <el-button type="info" @click="resetArticle">重置</el-button>
    <el-button type="primary" @click="handleSubmitArticle">
      {{btnText}}
    </el-button>
  </div>
</template>
<script>
export default {
  name: 'WriteArticle',
  data () {
    return {
      title: '',
      article: {
        title: '',
        banner: '',
        content: ''
      },
      btnText: '确认添加',
      articleDialogTitle: '添加文章',
      showArticleDialog: false,
      articleLoading: true,
      rules: {
        title: [
          { required: true, message: '文章标题不能为空', trigger: 'blur' }
        ],
        banner: [
          { required: true, message: '请上传文章封面图', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '文章内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    goBack () {
      history.back()
    },
    beforeAvatarUpload (file) { // 上传封面图限制
      const isImage = file.type.indexOf('image') !== -1;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isImage) {
        this.$message.error('只能上传图片!')
      };
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      };
      return isImage && isLt2M;
    },
    uploadBanner ({ file }) { // 自定义上传
      console.log(file)
      // 图片回显
      
    },
    handleSubmitArticle () { // 保存文章
      this.$refs['article'].validate(valid => {
        if (valid) {
          console.log(this.article)
        } else {
          return false
        }
      })
    },
    resetArticle () { // 重置文章
      this.article = {}
    }
  },
  created () {
    let path = this.$route.meta.path;
    this.title = path[path.length - 1];
  }
}
</script>
<style lang="scss" scoped>
  .cke_contents {
    height: 1000px!important;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 332px;
    height: 241px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 50px;
    color: #8c939d;
  }
  .avatar {
    width: 332px;
    height: 241px;
    display: block;
  }
</style>
